/*
 * 文章列表
 */
<script>
    //import otherComponent from '@/components/otherComponent.vue';
    
    export default {
        name: "ys-article-list",
        components:{
            //otherComponent
        },
        props: {
            
        },
        data() {
            return {
                list : [{
                    'title' : "谭家场6月6号“六一慰问活动”",
                    'url' : "",
                    'from' : "儿童之家",
                    'time' : "2019-6-25",
                    'images' : [
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163428163.jpg',
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163546878.jpg',
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163528709.jpg'
                    ]
                },{
                    'title' : "黄溪口双溪村“小带小”关爱留守儿童空巢老人",
                    'url' : "",
                    'from' : "儿童之家",
                    'time' : "2019-6-25",
                    'images' : [
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610161042484.jpg',
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610161024400.jpg'
                    ]
                },{
                    'title' : "谭家场6月6号“六一慰问活动”",
                    'url' : "",
                    'from' : "儿童之家",
                    'time' : "2019-6-25",
                    'images' : [
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163428163.jpg',
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163546878.jpg',
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610163528709.jpg'
                    ]
                },{
                    'title' : "“配方粉”能治婴幼儿过敏？市场监管总局：停产召回",
                    'url' : "",
                    'from' : "儿童之家",
                    'time' : "2019-6-25",
                    'images' : [
                        'http://children-home.oss-cn-shenzhen.aliyuncs.com/article/20190610102707166.jpg'
                    ]
                },
                ]
            }
        },
        computed: {
            /*
            * 方法注释
            */
            // funName : function() {
            //     return some;
            // }
        },
        methods: {
            /*
             * 方法注释
             */
//             funName : function() {
// 
//             }
        }
    }      
</script>
<template name="ys-article-list">
    <view class="ys-article-list">
        <view class="article-list" v-for="(item, key) in list" :key="key" :class="[{ list3: item.images.length == 3 }, { list2: item.images.length == 2 }, { list1: item.images.length == 1 }]">
            <navigator class="item">
                <view class="title">{{ item.title }}</view>
                <view class="image-box">
                    <image :src="item2" mode="" class="image" v-show="item.images" v-for="(item2, key2) in item.images" :key="key2" />
                </view>              
                <view class="info">{{ item.from }} {{ item.time }}</view>
            </navigator>
        </view>
    </view>
</template>
<style lang="scss">
    .ys-article-list {
        .article-list {
            .item {
                display: flex;
                flex-direction: column;  
                margin-top: 50upx;
                .title {
                    font-size: 34upx;
                    margin-bottom: 20upx;
                }
                .image-box {
                    display: flex;
                    flex-direction: row; 
                    justify-content: space-around;
                    .image {
                        border-radius: 15upx;
                    }
                }
                .info {
                    width: 100%;
                    color: #999999;
                    margin-top: 20upx;
                }
            }
        }
        .list1 {
            .item {
                display: flex;
                flex-direction: row; 
                flex-wrap: wrap;
                justify-content: space-between;
                .title {
                    width: 60%;
                }
                .image-box {
                    .image {
                        width: 220upx;
                        height: 120upx;
                    }
                }
                .info {
                    
                }                
            }
        }
        .list2 {
            .item {     
                .title {
                    
                }
                .image-box {
                    .image {
                        width: 330upx;
                        height: 185upx;
                    }                    
                }
                .info {
                    
                }                
            }            
        }
        .list3 {
            .item {     
                .title {
                    
                }
                .image-box {
                    .image {
                        width: 220upx;
                        height: 120upx;
                    }
                }
                .info {
                    
                }                
            }            
        }
    }
</style>